<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/home' }"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>所有用户</el-breadcrumb-item>
        <!-- <el-button @click="getAllusers(true)">get</el-button> -->
      </el-breadcrumb>
    <el-table
        :data="users_data_show.filter(data => !search ||
        data.id.toString().toLowerCase().includes(search.toLowerCase()) ||
        data.name.toLowerCase().includes(search.toLowerCase()) ||
        data.phone.toLowerCase().includes(search.toLowerCase()) ||
        transferSex(data.sex).includes(search.toLowerCase()) ||
        transferKind(data.kind).toLowerCase().includes(search.toLowerCase()) ||
        data.pwd.toLowerCase().includes(search.toLowerCase()) ||
        data.addr.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%">
        <el-table-column
            label="用户ID"
            sortable
            prop="id">
        </el-table-column>
        <el-table-column
            label="用户名"
            sortable
            prop="name">
        </el-table-column>
        <el-table-column
            label="联系电话"
            sortable
            prop="phone">
        </el-table-column>
        <el-table-column
            label="性别"
            prop="sex"
            :filters="[{ text: '男', value: 0 }, { text: '女', value: 1 }]"
            :filter-method="filterSex"
            filter-placement="bottom-end">
          <template slot-scope="{row}">
              {{ row.sex === 0? '男' : "女" }}
          </template>
          
        </el-table-column>
        <el-table-column
            label="类型"
            prop="kind"
            :filters="[{ text: '商家', value: 0 }, { text: '顾客', value: 1 }]"
            :filter-method="filterKind"
            filter-placement="bottom-end">
            <template slot-scope="{row}">
              <el-tag>{{ row.kind == 0? '商家' : "顾客" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="密码"
            prop="pwd">
        </el-table-column>
        <el-table-column
            label="地址"
            prop="addr">
        </el-table-column>
        <el-table-column
            align="right">
            <template slot="header" slot-scope="scope">
            <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
            </template>
        
              <template slot-scope="{row,$index}">
                <el-button v-if="row.status!='未审核'" size="mini" type="success" @click="handleModifyStatus(row,'未审核')">
                      已审核
                  </el-button>
                  <el-button v-if="row.status!='已审核'" size="mini" type="warning" @click="handleModifyStatus(row,'已审核')">
                      未审核
                  </el-button>  
                <el-button
                size="mini"
                type="danger"
                @click="handleDelete(index,row)">删除</el-button>  
              </template>
          
        </el-table-column>
    </el-table>
    <el-dialog >
      
    </el-dialog>
</div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      users_data:[],
          users_data_show:[],
          currentPage:'',
          search: '',
          pageSize:10,
          users : [
            {
                id:'0',
                name:'aaa',
                phone:'111',
                sex:'1',
                kind:'0',
                pwd:'ddd',
                addr:'rrr',
                status: '未审核' 
            },
            {
                id:'1',
                name:'adss',
                phone:'12312',
                sex:'0',
                kind:'1',
                pwd:'ddaad',
                addr:'sd7r',
                status: '未审核' 
            }
        ]
    }
  },
  created() {
    this.getAllusers()
  },
  methods: {
    // 获取院系列表
    async getAllusers(search) {
      console.log("hhh")
            var query = {}
            axios.post(`/admin/allusers`,query)
            .then((res) => { 
              console.log(res)
            this.collegeList = res.data;
            this.users_data = this.collegeList;
            this.currentPage = 1;
            var start = 0;
            var end = start + this.pageSize;
            this.users_data_show = this.users_data.slice(start, end)
            console.log(this.users_data_show)
            if (res.status !== 200) return this.$message.error('获取列表失败')
            })
    },
    transferSex(s){
      if(s == 0) return "男"
      else return "女"
    },  
    transferKind(s){
      if(s == 0) return "商家"
      else return "顾客"
    },
    handleModifyStatus(row, status) {
      console.log(row)
      this.$message({
        message: '操作Success',
        type: 'success'
      })
      row.status = status
      var query = {}
      if(status === "已审核") {
        query = {id : row.id}
        axios.post('/admin/userpass',query)
        .then((res) => { 
              console.log(res)
            if (res.data.state !== 0) return this.$message.error('审核失败')
            })
      }
    },
      filterSex(value, row) {
        return row.sex === value;
      },
      filterKind(value, row) {
        return row.kind === value;
      },
        handleEdit(index, row) {
          console.log(index, row);
        },
        handleDelete(index,row) {
        console.log(row)
        var query = {id : row.id}
        // 弹框提示
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            // 确定删除
            axios.post(`/admin/deluser`,query)
          .then((res) => { 
              if (res.data.state != 0)
              return this.$message({
                type: 'error',
                message: '删除失败!',
              })
              this.$message({
              type: 'success',
              message: '删除成功!',
              })
              // 刷新院系列表
              this.getAllusers()
          })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
    },
   
  
  },
}
</script>
<style lang="less" scoped>
.select {
  width: 120px;
}
.pagination {
  margin-top: 15px;
}
</style>